<script>
import { isObject, last } from '@/utils/kris_utils'

export default {
  props: {
    value: {
      required: true,
      default: null
    },
    isEditing: {
      type: Boolean,
      required: true,
      default: false
    },
    fallback: {
      type: String,
      required: false,
      default: '-'
    }
  },
  data() {
    return {
      props: {
        checkStrictly: true
      },
      options: [],
      // currentValue:[],
      fullPath: []
    }
  },
  computed: {
    forward: {
      get() {
        const fullPath = this.genPathByValue(this.$attrs.options, this.value)
        if (!Array.isArray(fullPath)) { return [] }

        return fullPath.map(item => item.value)
      },
      set(v) {
        const department = last(v)
        if (typeof department !== 'number') { return }

        this.$emit('input', department)
      }
    },
    attrs() {
      const attrs = { ...this.$attrs }

      attrs['props'] = this.props
      // attrs['value'] = this.currentValue
      attrs['value'] = this.forward

      return attrs
    },
    listeners() {
      const listeners = { ...this.$listeners }

      listeners['input'] = this.handleInput

      return listeners
    },
    // fullPath(){
    //     return this.genPathByValues(this.$attrs.options,this.forward)
    // },
    valueForamtted() {
      if (!Array.isArray(this.fullPath) || this.fullPath.length <= 0) { return this.fallback }

      const department = last(this.fullPath)
      return department?.label ?? this.fallback
    },
    ready() {
      return Array.isArray(this.$attrs.options) && this.$attrs.options.length > 0 &&
                    typeof this.value === 'number' && !isNaN(this.value)
    }
  },
  watch: {
    ready(v) {
      if (!v) return
      this.fullPath = this.genPathByValue(this.$attrs.options, this.value)
    },
    value() {
      this.fullPath = this.genPathByValue(this.$attrs.options, this.value)
    }
  },
  methods: {
    handleInput(path) {
      // this.currentValue = path
      this.forward = path
      // this.fullPath = this.genPathByValues(this.$attrs.options,this.currentValue)
      // this.fullPath = this.genPathByValues(this.$attrs.options,path)
    },
    genPathByValue(options, value, path = [], key = 'value', childrenKey = 'children') {
      if (!Array.isArray(options) || options.length <= 0) { return null }

      for (const i in options) {
        const option = options[i]

        if (option[key] === value) {
          path.push(option)
          return path
        }

        if (Array.isArray(option[childrenKey])) {
          const result = this.genPathByValue(option[childrenKey], value, [...path, option])
          if (result !== null) { return result }
        }
      }

      return null
    },
    genPathByValues(options, values) {
      if (
        !Array.isArray(values) || values.length <= 0 ||
                !Array.isArray(options) || options.length <= 0
      ) { return [] }

      const current = {
        options,
        path: []
      }

      const result = values.reduce((prev, current) => {
        const option = prev.options.find(item => item.value === current)

        if (!isObject(option)) { return prev }

        prev.path.push(option)

        if (!Array.isArray(option['children']) || option['children'].length <= 0) { return prev }

        prev.options = option['children']

        return prev
      }, current)

      return result.path
    },
    find(options, value, key = 'value', childrenKey = 'children') {
      if (!Array.isArray(options)) { return null }

      for (const i in options) {
        const option = options[i]

        if (option[key] === value) { return option }

        if ('children' in option && Array.isArray(option['children'])) {
          const result = this.find(option.children, value, key, childrenKey)

          if (result !== null) { return result }
        }
      }
    }
  }
}
</script>

<template>
  <el-cascader
    v-if="isEditing"
    v-bind="attrs"
    v-on="listeners"
  />
  <span v-else>{{ valueForamtted }}</span>
</template>
